<template>
	<view>
		
		<NavBar title="个人中心"></NavBar>
		
		<view class="profile">
			<img :src="avatarUrl == null ? 'http://cdn.henrywong01.top/center/default.jpeg' : avatarUrl  " class="avatar"/>
			<view class="nickname">{{true_name == null ?  "客官怎么称呼呀！" : true_name}}</view>
			<text class="gender">性别：{{gender}}</text>
			<view class="more" @click="handleMore">
				<img src="http://cdn.henrywong01.top/center/more.png" class="img"/>
			</view>
		</view>
		
		<view class="menu">
			
			<view class="item" @click="handleMenuBtn('/pages/gift/index')">
				<img src="/static/center/gift.png" class="icon"/>
				<view class="txt">换领登记</view>
				<img src="/static/center/rarrow.png" class="rarrow"/>	
			</view>
			
			<view class="item" @click="handleMenuBtn('/pages/profile/index')">
				<img src="/static/center/profile.png" class="icon"/>
				<view class="txt">我的资料</view>
				<img src="/static/center/rarrow.png" class="rarrow"/>	
			</view>
			
			<view class="item" @click="handleMenuBtn('/pages/confirm/index')">
				<img src="/static/center/book.png" class="icon"/>
				<view class="txt">已预约疗程</view>
				<img src="/static/center/rarrow.png" class="rarrow"/>	
			</view>
			
			<view class="item" @click="handleMenuBtn('/pages/feedback/index')">
				<img src="/static/center/feedback.png" class="icon"/>
				<view class="txt">意见反馈</view>
				<img src="/static/center/rarrow.png" class="rarrow"/>	
			</view>
			
		</view>
		
		<view class="powered">Powered by Henry, and technical file as follow: https://www.henrywong01.top</view>
		
	</view>
</template>

<script>
	import {Request, getGlobalData} from '@/util.js';
	import NavBar from '@/components/NavBar.vue';
	const domain = getGlobalData('domain');
	
	export default {
		components:{
			NavBar
		},
		data() {
			return {
				avatarUrl: "",
				true_name: "",
				genderID: 0
			};
		},
		computed:{
			gender(){
				let gender;
				switch(this.genderID){
					case 0:
						gender =  "未知";
						break;
					case 1:
						gender =  "男";
						break;
					case 2:
						gender =  "女";
						break;
					default:
						gender = "未知";
				}
				uni.setStorageSync('gender', gender)
				return gender;
					
			}
		},
		methods:{
			handleMenuBtn(url){
				uni.navigateTo({
					url:url
				})
			},
			handleMore(){
				uni.navigateTo({
					url:"/pages/profile/index"
				})
			},
			getUserInfo(){
				Request(domain+"/client/user/userInfo",{openid: uni.getStorageSync('openid')}).then((res)=>{
					let e =res.data.data;
					this.avatarUrl = e.avatarUrl;
					this.true_name = e.true_name;
					uni.setStorageSync('avatarUrl', e.avatarUrl);
					uni.setStorageSync('true_name', e.true_name);
					this.genderID = e.gender;
				})
			}
		},
		onShow(){
			this.getUserInfo();
			this.commitTabBarID(5);
		},
	}
</script>
<style lang="less">
	@import '../../uni.less';
	page{
		background-color: @background_color;
		padding-bottom: @tab_bar_height;
	}
</style>
<style lang="less">

	
	.profile{
		position: relative;
		width: 95%;
		height: 200rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 180rpx;
		border-radius: 20rpx;

		.avatar{
			width: 110rpx;
			height:110rpx;
			position: absolute;
			top: 45rpx;
			left: 45rpx;
			border-radius: 100rpx;
		}

		.nickname{
			position: absolute;
			color: #604141;
			font-size: 35rpx;
			left:200rpx;
			top: 50rpx;
			font-weight: bold;
			width:400rpx;
			display: flex;
			
		}

		.gender{
			color: #c4c4c4;
			position: absolute;
			font-size: 25rpx;
			left: 200rpx;
			top: 110rpx;
		}

		.more{
			position: absolute;
			right:40rpx;
			height: 100%;
			display: flex;
			align-items: center;

			width:100rpx;
			.img{
				position: relative;
				left: 60rpx;
				width:34rpx;
				height:34rpx;
			}
		}
		
	}

	.menu{
		width: 95%; 
		background-color: #fff;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.item{
			margin: 0 auto;
			height: 100rpx;
			width: 95%;
			border-bottom: 1rpx solid #f6f6f6;
			display: flex;
			flex-direction: row;
			align-items: center;
			.txt{
				font-size: 32rpx;
				margin-left: 32rpx;
				color: #D1A8A8;
				width:400rpx;
			}

			.icon{
				margin-left: 32rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.rarrow{
				width: 40rpx;
				height: 35rpx;
				margin-left: 80rpx;
			}
		}

	}

	.powered{
		position: absolute;
		bottom:200rpx;
		color:#D1A8A8;
		font-size: 25rpx;
		text-align: center;
		.PS_RD{
			color: #fff;
		}
	}

</style>
